<style scoped>
    .print-PO-page{max-width:780px;margin:0 auto;}  
</style>
<template>
    <div class="print-PO-page">
        <div class="handle-box">
            <label>打印预览界面：</label>
            <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="createPdf">打印</el-button>
            <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="backSeePO">返回</el-button>
        </div>
        <div id="pdf-wrap" style="padding:5px 10px;max-width:780px;margin:0 auto;">
            <div id="pdf-content" style="position:relative;padding:5px 10px;max-width:780px;margin:0 auto;font-family:'仿宋';">
                <h1 class="title" style="font-size:20px;line-height:32px;margin-bottom:20px;text-align:center;font-family:'SimHei';letter-spacing: 20px;">采购订单</h1>
                <div :model="seePOForm" style="border-bottom:1px solid #ccc;font-size:14px;" class="from-div">
                    <ul class="left-ul" style="padding:0;margin:0;display:inline-block;list-style: none;">
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">订单编号：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;"></div> <!-- {{seePOForm.prOrderCode}} 不是这个，取值ECC -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">时  间：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">{{seePOForm.createTime}}</div>
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">供应商编号：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">{{seePOForm.partnerCode}}</div>
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">供应商名称：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">{{seePOForm.partnerName}}</div>
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">地  址：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">北京</div> <!-- {{seePOForm.address}} -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">邮  编：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">000001</div>  <!-- {{seePOForm.address}} -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">传  真：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">020202020</div> <!-- {{seePOForm.fax}} -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">电  话：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">12345789900</div>   <!-- {{seePOForm.telephone}} -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">联系人：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">张三年</div>    <!-- {{seePOForm.contacts}} -->
                        </li>
                        <li style="">
                            <label style="width:84px;line-height:22px;display:inline-block;font-size:14px;">抄送：</label>
                            <div class="item-value" style="padding:0 5px;min-width:200px;height:22px;line-height:22px;display:inline-block;">22222</div>  <!-- {{seePOForm.contacts}} -->
                        </li>
                    </ul>
                    <ul class="right-ul" style="padding:0;margin:0 0 0 60px;width：300px;display:inline-block;list-style: none;">
                        <p style="margin: 0; padding: 0;line-height:22px;">联想秘密一年</p>
                        <br>
                        <p class="p-style" style="margin: 0; padding: 0;line-height:24px;font-size:16px;">{{seePOForm.legalPersonName}}</p>
                        <br>
                        <p class="p-style" style="margin: 0; padding: 0;height:75px;line-height:24px;font-size:16px;">第一个工厂</p>
                        <!--收货工厂 {{seePOForm.legalPlant}} -->
                        <li style="">
                            <label style="width:66px;line-height:20px;display:inline-block;font-size:14px;">收件人：</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;height:22px;line-height:22px;display:inline-block;" v-cloak>{{seePOForm.creatorName}}</div> <!--  -->
                        </li>
                        <li style="">
                            <label style="width:66px;line-height:20px;display:inline-block;font-size:14px;">电  话：</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;height:22px;line-height:22px;display:inline-block;">1222222</div> <!-- {{seePOForm.telephone}} -->
                        </li>
                        <li style="">
                            <label style="width:66px;line-height:20px;display:inline-block;font-size:14px;">传  真：</label>
                            <div class="item-value" style="padding:0 5px;min-width:100px;height:22px;line-height:22px;display:inline-block;">3333445</div> <!-- {{seePOForm.fax}} -->
                        </li>
                    </ul>
                    <div class="width-100" style="position:relative;width:100%;line-height:20px;">
                        <h3 style="margin: 0; padding: 0;width:100%;font-weight: bold!important;font-size:12px;font-family:'SimHei';font-style:normal;">1.请在收到此订单后，三天之内确认回传。</h3>
                        <h3 style="margin: 0; padding: 0;display:inline-block;width:500px;font-weight: bold!important;font-size:12px;font-family:'SimHei';font-style:normal;">2.请在交运的货物上和相应的函件上注明订单号：PO#</h3>
                        <!-- {{seePOForm.prOrderCode}}不是这个，取自ECC -->
                        <h3 style="position:absolute;right:0;margin: 0;width:100px;padding: 0;display:inline-block;font-weight: bold!important;font-size:12px;font-family:'SimHei';font-style:normal;">币  别：{{seePOForm.currency.label}}</h3>
                    </div>
                </div>
                <div class="order-date" style="position:relative;">
                    <div class="table-head" style="padding:0;margin:0;border-bottom:1px solid rgb(217, 193, 191);list-style: none;font-size:12px;">
                        <ul style="margin:0;padding:0;list-style: none;">
                            <li class="table-head-item" style="padding:0 2px;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">项目</li>
                            <li class="table-head-item marginleft20" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">物料编码</li>
                            <li class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">单位</li>
                            <li class="table-head-item" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">订单数量</li>
                            <li class="table-head-item" style="padding:0;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">不含税单价</li>
                            <li class="table-head-item" style="padding:0 2px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">总价</li>
                            <li class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">税码</li>
                            <li class="table-head-item" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">库存地</li> 
                        </ul>
                        <ul style="margin:0;padding:0;list-style: none;">
                            <li class="table-head-item top20" style="padding-left:22px;width:78%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">物料名称</li>
                            <li class="table-head-item top20" style="padding-left:8.6%;width:20%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">到货期</li>                         
                        </ul>          
                    </div>
                    <div class="table-content" :id="'table-content'+index" v-for="(firstTable,index) in procurementDetailsData" :key="index" style="position:relative;height:46px;padding:0;margin:0;border-bottom:1px solid rgb(217, 193, 191);list-style: none;font-size:12px;">
                        <ul style="margin:0;padding:0;list-style: none;">
                            <li class="table-content-item" style="padding:0 2px;width:36px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;">{{index + 1}}</li>
                            <li class="table-content-item marginleft20" :title="firstTable.materialCode" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;">{{firstTable.materialCode}}</li>
                            <li class="table-content-item" :title="firstTable.unit" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;">{{firstTable.unit}}</li>
                            <li class="table-content-item" :title="firstTable.amount" style="padding:0 2px;width:66px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;">{{firstTable.amount}}</li>
                            <li class="table-content-item" :title="firstTable.priceNoTax" style="padding:0;width:86px;word-wrap: break-word;text-align:right;line-height:22px;display:inline-block;">{{firstTable.priceNoTax}}</li>
                            <li class="table-content-item" :title="firstTable.totalMoney" style="padding:0 2px;width:86px;word-wrap: break-word;text-align:right;line-height:22px;display:inline-block;">{{firstTable.totalNoTax}}</li>
                            <li class="table-content-item" :title="firstTable.taxCode" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;">{{firstTable.taxCode}}</li>
                            <li class="table-content-item" style="padding:0 2px;min-width:66px;word-wrap: break-word;text-align:center;line-height:22px;display:inline-block;">{{seePOForm.storeRoomCode}}</li>
                        </ul>
                        <ul style="margin:0;padding:0;list-style: none;">
                            <li class="table-content-item top20" :title="firstTable.materialName" style="padding-left:22px;width:78%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;">{{firstTable.materialName}}</li>
                            <li class="table-content-item top20" style="padding-left:8%;width:20%;box-sizing:border-box;word-wrap: break-word;text-align:left;line-height:22px;display:inline-block;">{{seePOForm.expectTime}}</li>
                        </ul>
                    </div>
                </div>
                <div v-if="procurementDetailsData.length > 15" style="position:relative;line-height:32px;font-size:14px;" class="net-worth">净价总值：
                    <div style="position:absolute;left:476px;font-size:14px;display:inline-block;">{{seePOForm.totalMoneyNoTax}}</div>
                </div>
                <div v-else style="position:relative;line-height:32px;font-size:14px;" class="net-worth">净价总值：
                    <div style="position:absolute;left:464px;font-size:14px;display:inline-block;">{{seePOForm.totalMoneyNoTax}}</div>
                </div>
                <div class="big-box"> 
                    <div class="remark" style="width:100%;min-height: 132px;position:relative;">
                        <div class="p-style" style="width:42px;line-height:32px;font-size:14px;display:inline-block;">备注：</div>
                        <div class="p-style" style="position:absolute;left:42px;top:7px;min-height:100px;line-height:20px;font-size:14px;display:inline-block;" v-cloak>{{seePOForm.remarks}}</div> <!--  -->
                    </div>
                    <div class="message-box">
                        <div class="s-box" style="margin:20px 0 0 20px;width:300px;display:inline-block;font-size:14px;">
                            <p style="margin: 0 0 20px 0; padding: 0;line-height:36px;">供方确认签字：</p>
                            <p style="margin: 0; padding: 0;line-height:36px;">日期：</p>
                        </div>
                        <div class="s-box" style="margin:20px 0 0 50px;width:200px;display:inline-block;font-size:14px;">
                            <p style="margin: 0 0 20px 0; padding: 0;line-height:36px;">需方签字：</p>
                            <p style="margin: 0; padding: 0;line-height:36px;">经办人：</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 查询表单
                seePOForm:{
                    id: "",
                    prOrderCode: "",
                    createTime: "",
                    expectTime: "",
                    contacts: "",
                    telephone: "",
                    amount: "",
                    totalMoney: "",
                    storeRoomCode: "",
                    currency: "",
                    creatorName: "",
                    partnerCode: "",
                    partnerName: ""
                },
                procurementDetailsData:[],
                pages: 0, //除第一页的页数
                allPages: 0,  //总页数

            };
        },
        //进入页面立即运行此方法
        mounted: function () {
            var _this = this;
            _this.seePOForm.prOrderCode=_this.$route.query.prOrderCode;
            _this.seePODetails();  //进入页面直接 查看PO详情

        },
        methods: {
            seePODetails(){   //查看PO详情
                var _this =this;
                $.ajax({
                    url:_this.procurement_service+'procurementOrder/view?prOrderCode='+_this.seePOForm.prOrderCode,
                    type:'POST',
                    cache:false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:'application/json;charset=utf-8',
                    success:function(data){
                        if(data.success){
                            _this.seePOForm=data.data.procurementOrderBasic;
                            // 时间
                            _this.seePOForm.createTime=moment(data.data.procurementOrderBasic.createTime).format("YYYY-MM-DD");
                            // 到货期为年月日
                            _this.seePOForm.expectTime=moment(data.data.procurementOrderBasic.expectTime).format("YYYY-MM-DD");
                            _this.procurementDetailsData=data.data.procurementOrderItems;
                            if(_this.seePOForm.totalMoneyNoTax!=null){
                                _this.seePOForm.totalMoneyNoTax = _this.seePOForm.totalMoneyNoTax.toFixed(2);   //采购不含税总金额保留两位小数
                            }
                            setTimeout(function(){
                                _this.addTableHead();
                            },0);
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 生成pdf
            createPdf(){
                let newWindow = window.open("_blank");   //打开新窗口
                let codestr = document.getElementById("pdf-wrap").innerHTML;   //获取需要生成pdf页面的div代码
                newWindow.document.write('<html><head><title>取自ECC的订单编号(等数据)</title>');
                newWindow.document.write('</head><body >');
                newWindow.document.write(codestr);   //向文档写入HTML表达式或者JavaScript代码
                newWindow.document.write('</body></html>');
                newWindow.document.close();     //关闭document的输出流, 显示选定的数据
                newWindow.focus();
                newWindow.print();   //打印当前窗口
                newWindow.close();
                return true;
            },
            // 分页并且添加表头
            addTableHead(){
                var _this = this;
                var contentLength=_this.procurementDetailsData.length;
                var pageTemplate = '<div class="pageBreak" style="page-break-after: always;"></div><div class="table-head" style="padding:0;margin:0;border-top:1px solid rgb(217, 193, 191);border-bottom:1px solid rgb(217, 193, 191);list-style: none;font-size:12px;"><ul style="margin:0;padding:0;list-style: none;"><li class="table-head-item" style="padding:0 2px;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">项目</li><li class="table-head-item marginleft20" style="margin-left:24px;padding:0 2px;width:138px;word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">物料编码</li><li class="table-head-item" style="padding:0 8px;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">单位</li><li class="table-head-item" style="padding:0 8px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">订单数量</li><li class="table-head-item" style="padding:0 0 0 2px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">不含税单价</li><li class="table-head-item" style="padding:0 0 0 8px;width:86px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">总价</li><li class="table-head-item" style="padding:0;width:36px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">税码</li><li class="table-head-item" style="padding:0 8px;width:66px;word-wrap: break-word;text-align:center;line-height:26px;display:inline-block;">库存地</li></ul><ul style="margin:0;padding:0;list-style: none;"><li class="table-head-item top20" style="padding-left:22px;width:78%;box-sizing:border-box;                word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">物料名称</li><li class="table-head-item top20" style="padding-left:9%;width:20%;box-sizing:border-box;                word-wrap: break-word;text-align:left;line-height:26px;display:inline-block;">到货期</li></ul></div>';
                // 第一页显示13条
                var markPageCount=6;
                var markPageCount2=14; 
                var firstPageCount = 13;
                var perPageCount = 20;
                // if(contentLength >= firstPageCount){
                //     $("#table-content"+(firstPageCount-1)).after(pageTemplate);
                // } 
                // // 第一页之后所有的页数(每页20条)
                // if((contentLength - firstPageCount) < 6){
                //     _this.pages = 1;
                // }else if(contentLength - firstPageCount > 6){
                //     _this.pages = Math.round((contentLength - firstPageCount)/perPageCount) + 1;
                // }
                // // debugger
                // _this.allPages = _this.pages; // + 1
                // //添加分页的表头
                // var lastTableContentId ;
                // for(var i=1;i < _this.pages;i++){
                //     lastTableContentId = (firstPageCount-1) + perPageCount * i;
                //     $("#table-content"+lastTableContentId).after(pageTemplate);
                // }

                // // 备注：之后的内容整体换到下一页
                // if((contentLength < firstPageCount && contentLength > (firstPageCount - 6))){
                //     $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                //     _this.allPages = _this.allPages + 1; // 
                // }else if((contentLength - firstPageCount) % perPageCount > 14){
                //     $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                //     _this.allPages = _this.allPages + 1; // 
                // }


                if(contentLength > firstPageCount){   // 所有内容超出第一页的内容 
                    var ysLastLen=(contentLength - firstPageCount)%perPageCount;
                    if(ysLastLen==0){    // 第二页没占满
                        _this.pages = Math.round(( contentLength - firstPageCount) / perPageCount);  // 1页
                    }else{
                        _this.pages = Math.round(( contentLength - firstPageCount) / perPageCount) + 1;  
                    }
                    //添加分页的表头
                    var lastTableContentId;
                    for (var i = 0; i < _this.pages; i++) {
                        lastTableContentId = (firstPageCount - 1) + perPageCount * i;
                        $("#table-content" + lastTableContentId).after(pageTemplate);
                    }
                    //
                    if(contentLength>(markPageCount2+perPageCount*(_this.pages-2)+firstPageCount)&&contentLength <((perPageCount*(_this.pages-1)+firstPageCount))){
                        $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                    }
                }else {  // 所有内容比第一页容纳的内容少
                    if (contentLength > markPageCount&&contentLength !=firstPageCount) {  // 第一页能容纳所有内容，且第一页没有占满，但是装不下备注及之后的内容，则在净价总之之后添加分页，使备注及之后的内容分到第二页
                        $(".net-worth").after('<div class="pageBreak" style="page-break-after: always;"></div>');
                    }
                }
                if(contentLength%firstPageCount==0||(contentLength-firstPageCount)%perPageCount==0){  //内容整页，备注之后的内容在下一页
                    //正好时不需添加表头 所以会再加1
                    _this.allPages=$(".pageBreak").length+2;
                }else{
                    _this.allPages=$(".pageBreak").length+1;
                }

                // 添加分页的页码
                // console.log("_this.allPages===="+_this.allPages)
                for(var i=0;i<_this.allPages;i++){
                    $("#pdf-content").append('<div class="page-code" style="position:absolute;top:'+ (1010 + 1040 * i)+'px;right:8px;font-size:12px;"><span>'+ (i+1) +'</span>/<span>'+_this.allPages+'</span></div>');
                }


            },
            // 返回按钮
            backSeePO(){
                var _this=this;
                _this.$router.push({path:"/SeePO",query:{prOrderCode:_this.seePOForm.prOrderCode}});
            },

            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
    }
</script>